<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
@font-color:#686E71;//默认黑色字体
@border-color:#E3E8EA;//默认边框
.textbox{
    .close{
        position: absolute;
        top:5px;
        right:10px;
        width: 20px;
        height: 20px;
        background:url('../images/assembly_close.png') no-repeat;
        cursor: pointer;
    }
    .btn{
        position: absolute;
        left:0;
        bottom: 11px;
        Button{
            width: 110px;
            height: 36px;
            padding: 0;
            text-align: center;
            line-height: 36px;
        }
        .styleOk{
            margin: 0 20px;
        }
        .styleClear{
            background-color: #F16473;
            border-color:#F16473;
        }

    }
    .name{
        line-height: 26px;
        font-size: 12px;
        color: @font-color;
    }
    .choosecolor{
        width: 154px;
        height: 20px;
        display: inline-block;
        margin-top: 3px;
        border: 1px solid @border-color;
        cursor: pointer;
        vertical-align: top;
    }
    .choosecolordiv{
        display: inline-block;
        width: 154px;
        height: 26px;
        line-height: 26px;
        background-color: @border-color;
        padding-left: 10px;
        color:@font-color;
    }
    .clearColor{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        background: #F6FAF9;
        border: 1px solid #E3E8EA;
        cursor: pointer;
        float: right;
    }
    .imgbox{
        display:inline-block;
        width:180px;
        height:21px;
        border:1px solid #000;
        
    }
    .imgbtnbox{
        i{
            border: 1px solid #FE9333;
            border-radius: 4px;
            font-style:normal;
            height:24px;
            line-height:24px;
            text-align:center;
            color:#FE9333;
            padding:0 10px;
            cursor: pointer;
        }
        .fl{
            float:left;
        }
        .fr{
            float:left;
            border: 1px solid #E3E8E9;
            font-size: 12px;
            color: #686E71;
            margin-left: 10px;
        }
    }
        
}
//动画

</style>
<style lang="less">
.textbox{
    .ivu-tabs{
        overflow: visible;
        .ivu-collapse-content{
           overflow: visible;
        }
        .ivu-slider-button-wrap .ivu-tooltip{
            display: none;
        }
        .ivu-tabs-tabpane{
            position: relative;
        }
    }
   .ivu-select-single .ivu-select-selection .ivu-select-placeholder{
        height: 26px;
        line-height: 26px;
    }
    .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        height: 26px;
        line-height: 26px
    }
    .ivu-select-single .ivu-select-selection{
        height: 26px;
    }
    .ivu-collapse-content{
        width: 100%;
        padding:  0 20px;
    }
    .ivu-row{
        margin-bottom: 13px;
    }
    .ivu-slider-wrap{
        margin: 0;
        
    }
    .ivu-slider-input .ivu-slider-wrap{
        width: 108px;
        float: left;
        margin: 0;
        margin-top: 3px;
    }
    .ivu-slider-input .ivu-input-number{
        margin: 0;
        height: 26px;
        line-height: 26px;
        width: 66px;
        .ivu-input-number-handler{
            height: 13px;
        }        
    }
    .ivu-input-number-input-wrap{
        height: 26px;
        .ivu-input-number-input{
            height: 26px;
            line-height: 26px;
            background-color: #F6FAF9;
        }
    }

    .ivu-collapse-content{

        .vue-color__sketch{
            position: absolute;
            top:30px;
            right: 0;
            z-index: 1;
        }
    }
}
</style>
<template>
	<div class="textbox" v-show="texthide"  @click.stop="hidetext()">
        <div class="close" @click="closefour"></div>
        <h5 v-drag>四模块整体组建设置</h5>
          <div class="btn">
            <Button type="warning" class="styleOk" @click="savestylebtn">确定</Button>
            <Button type="primary" class="styleClear" @click="clearstyFN">清除样式</Button>
        </div>  
        <Tabs type="card" :animated="false">
            <Tab-pane label="样式" class="styles">
                <Collapse accordion>
                    <Panel name="1">
                        模块样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    名称颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="fzbtFn1" class="choosecolor" :style="'background-color:'+styleemit.fzbt"></div>
                                    <!-- <div class="choosecolordiv">{{styleemit.fzbt}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="clearfzbtFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxBg1" @change-color="onChange1" v-model="styleemit.fzbt"></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    正文颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="fzbtFn2" class="choosecolor" :style="'background-color:'+styleemit.fzmk"></div>
                                    <!-- <div class="choosecolordiv">{{styleemit.fzmk}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="clearfzmkFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxBg2" @change-color="onChange2" v-model="styleemit.fzmk" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    背景颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="fzbtFn3" class="choosecolor" :style="'background-color:'+styleemit.bgmk"></div>
                                    <!-- <div class="choosecolordiv">{{styleemit.bgmk}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="clearbgmkFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxBg3" @change-color="onChange3" v-model="styleemit.bgmk" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                        </div>                                            
                    </Panel>
                    <Panel name="2">
                        背景样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    背景颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="fzbtFn4" class="choosecolor" :style="'background-color:'+styleemit.bgbt"></div>
                                    <!-- <div class="choosecolordiv">{{styleemit.bgbt}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="clearbgbtFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxBg4" @change-color="onChange4" v-model="styleemit.bgbt" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                             <Row>
                                <Col span="6" class="name">
                                    背景图片
                                </Col>
                                <Col span="18">
                                
                                    <div class="imgbox" :style="'backgroundImage:'+styleemit.fzbg"></div>
                                    <div class="clearfix imgbtnbox">
                                        <i class="uploadbg fl" @click="biaotifn(1)">上传背景</i>
                                        <i class="fr" @click.stop="clearbg">清空</i> 
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Panel>
                </Collapse>
            </Tab-pane>
        </Tabs>
    </div>
</template>
<script>
    import {Sketch} from 'vue-color';
    import global from '../config/global'
    export default {
		data() {
            return {
                sketchboxBg1:false,//背景颜色选色框
                sketchboxBg2:false,//字体颜色选色框      
                sketchboxBg3:false,//边框颜色选色框
                sketchboxBg4:false,//边框颜色选色框
                styleemit:{
                    fzbt:'',//背景颜色
                    fzmk:'',//字体颜色
                    bgmk:'',//边框颜色
                    bgbt:'',//标题背景颜色
                    fzbg:''
                }
            }
        },
        props:['texthide','biaotifn','global','tokendata','cemeteryId','templateId'],
        components: {
            'sketch-picker': Sketch
        },
        created(){
        },
        watch:{
            "styleemit":{
                handler:"sucbtnFn",
                "deep":true //监听一个对象
            }
		},
        activated(){
            //没执行。一进来组件没执行
        },
		methods:{
            clearbgbtFn(){
                this.styleemit.bgbt="";
            },
            clearbgmkFn(){
                this.styleemit.bgmk="";
            },
            clearfzmkFn(){
                this.styleemit.fzmk="";
            },
            clearfzbtFn(){
                this.styleemit.fzbt="";
            },
            fourstyleFn(obj){
                this.styleemit=obj
            },
            clearbg(){
                this.styleemit.fzbg='';
            },
            hidetext(){
                this.sketchboxBg1=false;
                this.sketchboxBg2=false;
                this.sketchboxBg3=false;
                this.sketchboxBg4=false;
            },
            showtext(obj){
                this.styleCss=obj
                //this.styleCss.fontFamily="微软雅黑";
                this.styleCss = Object.assign(this.styleCss,obj);
                this.styleCss.fontSize=parseInt(this.styleCss.fontSize)
                
                for(var i=0;i<this.fontFamily.length;i++){
                    if(this.styleCss.fontFamily==this.fontFamily[i].label){
                        this.styleCss.fontFamily=this.fontFamily[i].value
                    }
                }
                this.styleCss.opacity=this.styleCss.opacity==undefined?100:Number(this.styleCss.opacity)*100;
                this.styleCss.padding=parseInt(this.styleCss.padding);
                this.styleCss.lineHeight=parseInt(this.styleCss.lineHeight);
                this.styleCss.borderWidth=parseInt(this.styleCss.borderWidth);
                this.styleCss.borderStyle=this.styleCss.borderStyle;
                this.styleCss.backgroundColor=this.styleCss.backgroundColor
            },
            fzbtFn1(){
                this.sketchboxBg1=true;
                this.sketchboxBg2=false;
                this.sketchboxBg3=false;
                this.sketchboxBg4=false;
            },
            fzbtFn2(){
                this.sketchboxBg1=false;
                this.sketchboxBg2=true;
                this.sketchboxBg3=false;
                this.sketchboxBg4=false;
            },
            fzbtFn3(){
                this.sketchboxBg1=false;
                this.sketchboxBg2=false;
                this.sketchboxBg3=true;
                this.sketchboxBg4=false;
            },
            fzbtFn4(){
                this.sketchboxBg1=false;
                this.sketchboxBg2=false;
                this.sketchboxBg3=false;
                this.sketchboxBg4=true;
            },
            onChange1(val){
                this.styleemit.fzbt = val.hex;             
            },
            onChange2(val){
                this.styleemit.fzmk = val.hex;             
            },
            onChange3(val){
                this.styleemit.bgmk = val.hex;             
            },
            onChange4(val){
                this.styleemit.bgbt = val.hex;             
            },
            sucbtnFn(){
                this.$emit("emittexthide",this.styleemit,true);
            },
            savestylebtn(){
                var this_=this;
                var data={
                    "cemeteryId":this_.cemeteryId,
                    "templateId":this_.templateId,
                    "moduleTitleStyleColor":this_.styleemit.fzbt,//标题字体颜色
                    "nameStyleBackgroundImage":this_.styleemit.fzbg,//标题背景图片
                    "nameStyleBackgroundColor":this_.styleemit.bgbt,//标题背景颜色
                    "headerStyleBackgroundColor":this_.styleemit.bgmk,//模块背景颜色
                    "moduleSwiperPStyleColor":this_.styleemit.fzmk,//模块内容字体颜色
                    "moduleContentStyleColor":this_.styleemit.fzmk//模块内容字体颜色
                }
                this_.$http.post(global.host+"/comm/module/style/update",data,{headers:this_.tokendata})//风格
                    .then((response) => {

                    })
                    .catch(function (response) {
                })
                this.$emit("closefour",false);
            },
            closefour(){
                this.$emit("closefour",false);
            },
            clearstyFN(){//清除样式
                var this_=this;
                var data={
                    "cemeteryId":this.cemeteryId,
                    "templateId":this.templateId
                }
                this_.$http.post(global.host+"/template/delete/common/style",data,{headers:this_.tokendata})//风格
                    .then((response) => {
                        this_.$emit("fourstyle",response.body.result,false);
                    })
                    .catch(function (response) {
                })
            },
            
            
		}
    }
</script>